<template>
  <!-- type列表 -->
  <div class="home-container">
     <!-- 新增：搜索框和头像区域（同一行） -->
    <div class="search-avatar-container">
      <!-- 搜索框 -->
      <div class="search-box">
        <el-input 
        style="width: 350px"
          v-model="BlogSearchDTO.blogName" 
          placeholder="搜索内容..." 
          prefix-icon="Search"
          class="search-input"
          @keyup.enter="handleSearch"
        ></el-input>
        <el-button type="primary" @click="handleSearch" class="custom-search-btn">搜索</el-button>
      </div>

      <!-- 可点击的头像（跳转页面） -->
      <div class="avatar-container" @click="gotoLifePerson">
        <el-image 
          :src="userAvatar || defaultAvatar" 
          class="user-avatar" 
          @error="handleAvatarError"
        ></el-image>
      </div>
    </div>

      <!-- 全部类型按钮 AND 遍历类型列表 -->
    <div class="button-container">
      <!-- 全部类型按钮 -->
      <div class="type-item" :class="{ active: typeId === 0 }" @click="changeType(0)">
        全部
      </div>
      <!-- 遍历类型列表 -->
      <div v-for="item in types" :key="item.id" class="type-item" :class="{ active: typeId === item.id }"
        @click="changeType(item.id)">
        {{ item.name }}
      </div>
    </div>

    <!-- 瀑布流 -->
    <waterfall :col="calcColumns()" :width="calcItemWidth()" :gutterWidth="15" :data="itemsWithUser"
      @loadmore="loadMore" :loadDistance="20">
      <div class="cell-item" v-for="item in items" :key="item.id" @click="showBlog(item, $event)">
        <img :src="item.img" alt="博客图片" @error="handleImageError" />
        <div class="item-body">
          <div class="item-desc">{{ item.blogName }}</div>
          <div class="item-footer">
            <div class="footer-left">
              <img class="item-img" :src="item.user?.avatar || defaultAvatar" alt="用户头像" @error="handleAvatarError" />
              <div class="name">{{ item.user?.name || "未知用户" }}</div>
            </div>
            <div class="footer-right">
              <el-icon :size="16" @click.stop="handleCollect(item)">
                <component :is="item.isCollected ? StarFilled : Star" />
              </el-icon>
              <span>{{ item.count }}</span>
            </div>
          </div>
        </div>
      </div>
    </waterfall>

    <!-- blog详情框（带关闭按钮×） -->
    <div class="custom-dialog-container" v-show="visible">
      <!-- 右上角关闭按钮× -->
      <button class="close-btn" @click="closeModal">×</button>
      
      <div class="custom-dialog-content">
        <div class="img-video-container">
          <video controls autoplay muted :src="blogItem.video" class="video-player" v-if="blogItem.category === '视频'"></video>
          <el-image :src="blogItem.img || defaultImage" class="img" :preview-src-list="[blogItem.img]" v-else @error="handleImageError"></el-image>
        </div>
        <div class="blog-container">
          <div class="user-info">
            <img :src="blogItem.avatar || defaultAvatar" alt="User Avatar" class="user-avatar" @error="handleAvatarError" />
            <span class="user-name">{{ blogItem.name }}</span>
          </div>
          <h2 class="blog-title">{{ blogItem.blogName }}</h2>
          <p class="blog-description" v-html="blogItem.content"></p>
          <span class="blog-time">{{ blogItem.time }}</span>
          <el-divider></el-divider>

          <!-- 评论区 -->
          <div style="margin: 28px 0">
            <div style="padding: 10px 0; font-size: 16px; margin-top: 5px; margin-bottom: 5px; color: #8c939d">
              共 {{ blogItem.commentCount }} 条评论
            </div>
            
            <!-- 评论列表（带滚动条） -->
            <div class="comment-warp">
              <div v-for="item in blogItem.comments" :key="item.id" class="comment-item">
                <div class="comment-avatar">
                  <el-image :src="item.user?.avatar || defaultAvatar" @error="handleAvatarError"></el-image>
                </div>
                <div class="comment-main">
                  <div class="comment-info">
                    <span class="comment-name">{{ item.user?.name || "未知用户" }}</span>
                    <span class="comment-text">{{ item.content }}</span>
                  </div>
                  <div class="comment-ops">
                    <span class="comment-time">{{ item.time }}</span>
                    <el-button type="text" size="small" @click="handleReply(item.id)">回复</el-button>
                    <el-button type="text" size="small" @click="del(item.id)" v-if="conllection.userId === item.userId">删除</el-button>
                  </div>

                  <!-- 回复输入框 -->
                  <div class="reply-input" v-if="commentForm.pid === item.id && replyVisible">
                    <el-input v-model="commentForm.contentReply" placeholder="输入回复内容..." autocomplete="off"></el-input>
                    <div class="reply-btns">
                      <el-button size="mini" type="primary" @click="save">发送</el-button>
                      <el-button size="mini" @click="cancelReply">取消</el-button>
                    </div>
                  </div>

                  <!-- 子评论 -->
                  <div class="children-comments" v-if="item.children && item.children.length">
                    <div v-for="subItem in item.children" :key="subItem.id" class="comment-item child-comment">
                      <div class="comment-avatar">
                        <el-image :src="subItem.user?.avatar || defaultAvatar" @error="handleAvatarError"></el-image>
                      </div>
                      <div class="comment-main">
                        <div class="comment-info">
                          <span class="comment-name">{{ subItem.user?.name || "未知用户" }}</span>
                          <span v-if="subItem.pid" class="reply-at">回复 @{{ item.user?.name }}</span>
                          <span class="comment-text">{{ subItem.content }}</span>
                        </div>
                        <div class="comment-ops">
                          <span class="comment-time">{{ subItem.time }}</span>
                          <el-button type="text" size="small" @click="handleReply(subItem.id)">回复</el-button>
                          <el-button type="text" size="small" @click="del(subItem.id)" v-if="conllection.userId === subItem.userId">删除</el-button>
                        </div>

                        <!-- 子评论回复框 -->
                        <div class="reply-input" v-if="commentForm.pid === subItem.id && replyVisible">
                          <el-input v-model="commentForm.contentReply" placeholder="输入回复内容..." autocomplete="off"></el-input>
                          <div class="reply-btns">
                            <el-button size="mini" type="primary" @click="save">发送</el-button>
                            <el-button size="mini" @click="cancelReply">取消</el-button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 新增：固定在底部的一级评论框 -->
            <div class="top-comment-container">
              <div class="top-comment-input">
                <el-input 
                  v-model="comment.content" 
                  placeholder="分享你的想法..." 
                  autocomplete="off" 
                  :rows="3" 
                  type="textarea"
                  class="custom-textarea"
                ></el-input>
                <div class="top-comment-btn">
                  <el-button type="primary" @click="sendComment" >
                    发布评论
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, computed } from "vue";
import {
  findAllType,
  findBlogByType,
  Collect,
  getIsCollected,
  getCommentTree,
  addFirstComment,  // 补充：引入一级评论API
  addCommentReply,  // 补充：引入回复评论API
  deleteComment,     // 补充：引入删除评论API
  findBlogBySearch,
} from "@/api/life";
import { ElIcon } from "element-plus";
import { Star, StarFilled } from "@element-plus/icons-vue";
import { useUserStore } from "@/stores/userStore";
import { ElMessage } from "element-plus";
import router from '@/router';

// 让模板可直接用 Star/StarFilled（也可全局注册）
defineExpose({ Star, StarFilled });

const userStore = useUserStore();

// 定义响应式数据
const typeId = ref(0);
const conllection = reactive({
  userId: 3,  // 初始化默认值，会在onMounted中更新为实际用户ID
  itemId: "",
});
const types = ref([]);
const items = ref([]);
const page = reactive({
  pageNum: 1,
  pageSize: 100,
});

//定义BlogSearchDTO对象
const BlogSearchDTO = reactive({
  pageNum: 1,
  pageSize: 10,
// 定义响应式变量控制关键字搜索
  blogName:''
});


// 定义响应式变量控制模态框显示
const visible = ref(false);

// 定义博客数据对象
const blogItem = ref({
  id: "",
  img: "",
  avatar: "",
  name: "",
  blogName: "",
  content: "",
  time: "",
  commentCount: 0,
  category:"",
  video:"",
  comments: [] 
});

// 评论对象
const comment = ref({
  content:'',
  userId:'',
  time:'',
  pid:'',
  originId:'',
  itemId:'',
});

// 当前用户头像
const userAvatar = ref(defaultAvatar);

// 控制回复框的表单数据
const commentForm = reactive({
  pid: 0,       // 要回复的评论 ID，用于定位回复对象
  contentReply: '' // 回复的内容
});
const replyVisible = ref(false); // 控制回复框是否显示

// 默认头像
const defaultAvatar = "https://picsum.photos/200/200";
// 默认图片
const defaultImage = "https://picsum.photos/800/600";

// 计算列数（响应式）
const calcColumns = () => {
  const width = window.innerWidth;
  if (width < 600) return 2;
  if (width < 900) return 3;
  if (width < 1200) return 4;
  return 5;
};

// 计算每项宽度（根据列数动态调整）
const calcItemWidth = () => {
  const baseWidth = 280; // 基础宽度
  const columns = calcColumns();
  const maxWidth = Math.floor((window.innerWidth - 60) / columns); // 减去边距
  return Math.min(baseWidth, maxWidth); // 取较小值，避免过宽
};

// 切换blog类型（可以切换全部）
const changeType = async (id) => {
  typeId.value = id;
  page.pageNum = 1; // 重置页码

  try {
    const res = await findBlogByType(page.pageNum, page.pageSize, typeId.value);
    items.value = res.data.list || [];
    console.log("items:" + JSON.stringify(items.value));
    //对收藏的状态进行赋值
    await getConlectBoolean(items.value);
  } catch (error) {
    console.error("获取博客失败:", error);
    items.value = [];
  }
};
// 关键词搜索
const handleSearch = async() =>{
  if (!BlogSearchDTO.blogName.trim()) {
    ElMessage.warning('请输入搜索内容');
    return;
  }
  try {
    const res = await findBlogBySearch(BlogSearchDTO);
    items.value = res.data.list || [];
    //对收藏的状态进行赋值
    await getConlectBoolean(items.value);
    BlogSearchDTO.blogName ='';
    typeId.value=''
  } catch (error) {
    console.error("获取博客失败:", error);
    BlogSearchDTO.blogName ='';
    items.value = [];
  }
}
//点击头像跳转个人生活圈
const gotoLifePerson = async() =>{
  router.push("/LifePerson")
} 

// 加载更多（分页）
const loadMore = async () => {
  page.pageNum++;

  try {
    const res = await findBlogByType(page.pageNum, page.pageSize, typeId.value);
    if (res.data.list && res.data.list.length > 0) {
      items.value = [...items.value, ...res.data.list]; // 追加数据
    } else {
      page.pageNum--; // 没有更多数据时回退页码
    }
  } catch (error) {
    page.pageNum--; // 出错时回退页码
    console.error("加载更多失败:", error);
  }
};

// 获取所有类型
const selectAllType = async () => {
  try {
    const res = await findAllType();
    types.value = res.data;
    console.log("获取到的type列表:" + JSON.stringify(res.data));
  } catch (error) {
    console.error("获取类型失败:", error);
  }
};

// 收藏
const handleCollect = async (item) => {
  conllection.itemId = item.id;
  console.log(
    "收藏发送的itemId数据:" +
    conllection.itemId +
    "收藏发送的userId数据" +
    conllection.userId
  );
  try {
    const res = await Collect(conllection);
    console.log("接收到的数据" + res.data);
    // 直接用后端返回的 message 提示
    ElMessage[res.code === 200 ? "success" : "error"](res.message);
    //收藏成功后刷新数据 显示收藏信息
    getConlectBoolean(item);
  } catch (error) {
    ElMessage.error("请求失败，请重试");
  }
};

// 定义 showBlog 方法 打开模态框的方法
const showBlog = (item, $event) => {
  console.log("item" + JSON.stringify(item));
  // 2.1 存储当前点击的博客数据（用于弹窗渲染）
  blogItem.value.img = item.img;
  blogItem.value.avatar = item.user?.avatar; // 补充：添加可选链避免报错
  blogItem.value.name = item.user?.name;
  blogItem.value.content = item.content;
  blogItem.value.blogName = item.blogName;
  blogItem.value.time = item.time;
  blogItem.value.commentCount = item.commentCount;
  blogItem.value.id = item.id;
  blogItem.value.category = item.category;
  blogItem.value.video = item.video;
  // 获取blog详情中的评论数据
  getComments()
  // 2.2 控制弹窗显示
  visible.value = true;
};

// 关闭模态框的方法
const closeModal = () => {
  // 隐藏模态框
  visible.value = false;

  // 清空评论内容
  comment.value.content = "";
  // 重置回复状态
  commentForm.pid = 0;
  commentForm.contentReply = "";
  replyVisible.value = false;
};

// 发送评论的方法
const sendComment = async () => {
  if (!comment.value.content.trim()) {
    ElMessage.warning('请输入评论内容');
    return;
  }

  try {
    comment.value.userId = conllection.userId
    comment.value.itemId = blogItem.value.id
    console.log("发送的一级评论comment对象"+JSON.stringify(comment.value))
    // 调用一级评论API
    const res = await addFirstComment(comment.value);
    if (res.code === 200) {
      ElMessage.success("评论发布成功");
      // 刷新评论列表
      await getComments();
      // 重新刷新数据
      changeType(typeId.value);
      //模拟加一
      blogItem.value.commentCount++
      // 清空输入
      comment.value.content = "";
    } else {
      ElMessage.error("发布失败：" + (res.msg || res.message));
    }
  } catch (error) {
    ElMessage.error("网络异常，请重试");
  }
};

// 图片加载错误处理
const handleImageError = (e) => {
  e.target.src = defaultImage;
};

const handleAvatarError = (e) => {
  e.target.src = defaultAvatar;
};

// 获取用户收藏 blog 的状态值
const getConlectBoolean = async (items) => {
  const itemList = Array.isArray(items) ? items : [items];

  for (const item of itemList) {
    conllection.itemId = item.id;
    console.log(
      "状态值itemId数据:" +
      conllection.itemId +
      "状态值userId数据" +
      conllection.userId
    );

    try {
      // 加 await 等待异步请求结果
      const res = await getIsCollected(conllection.userId, conllection.itemId);
      console.log("接收到的状态值数据", res.data);
      item.isCollected = JSON.parse(res.data.isCollected);
      item.count = res.data.count;
    } catch (error) {
      console.error("状态值请求失败，请重试");
    }
  }
};

// 获取comments blog中的所有评论
const getComments = async () => {
  try {
    // 加 await 等待异步请求结果
    const res = await getCommentTree(blogItem.value.id)
    console.log("接收到的评论数据", res.data);
    blogItem.value.comments = res.data || [];
  } catch (error) {
    console.error("评论数据请求失败，请重试");
    blogItem.value.comments = []; // 失败时重置为空数组
  }
};

//获取用户的userId（从localStorage读取实际登录用户ID）
const getUserId = () => {
  // 获取存储的 user 数据（JSON 字符串形式）
  const userStr = localStorage.getItem("user");
  // 解析成 JavaScript 对象
  const user = userStr ? JSON.parse(userStr) : null;
  if (user && user.userId) {
    conllection.userId = user.userId; // 更新为实际用户ID
    console.log("userId更新为:", conllection.userId);
  } else {
    console.log("localStorage 中未找到有效的 user 数据,使用默认userId=3");
  }
};

// 提交回复
const save = async () => {
  // 1. 校验内容（非空等）
  if (!commentForm.contentReply.trim()) {
    ElMessage.warning('请输入回复内容');
    return;
  }

  try {
    comment.value.content = commentForm.contentReply.trim()
    comment.value.userId = conllection.userId
    comment.value.itemId = blogItem.value.id
    comment.value.pid = commentForm.pid
    // 2. 调用接口提交回复
    const res = await addCommentReply(comment.value);

    // 3. 接口成功后处理
    if (res.code === 200) {
      ElMessage.success('回复成功');
      // 刷新评论列表
      await getComments();
      // 重新刷新数据
      changeType(typeId.value);
      //模拟加一
      blogItem.value.commentCount++
      // 清空输入
      commentForm.contentReply=''
      // 关闭回复框
      cancelReply(); 
    } else {
      ElMessage.error('回复失败：' + (res.msg || res.message));
    }
  } catch (error) {
    ElMessage.error('网络异常，回复失败');
  }
};

// 取消回复（关闭输入框 + 清空内容）
const cancelReply = () => {
  commentForm.pid = 0;          // 重置回复目标 ID
  commentForm.contentReply = ''; // 清空输入内容
  replyVisible.value = false;   // 隐藏回复框
};

// 处理回复点击事件
const handleReply = (pid) => {
  commentForm.pid = pid;
  replyVisible.value = true;
  // 自动聚焦输入框
  setTimeout(() => {
    const input = document.querySelector('.reply-input .el-input__inner');
    input?.focus();
  }, 100);
};

// 删除评论
const del = async (commentId) => {
  try {
    // 调用删除评论API
    const res = await deleteComment(commentId);

    if (res.code === 200) {
      ElMessage.success('删除成功');
      // 刷新评论列表
      await getComments();
      // 重新刷新数据
      changeType(typeId.value);
      //模拟加一
      blogItem.value.commentCount--
    } else {
      ElMessage.error('删除失败：' + (res.msg || res.message));
    }
  } catch (error) {
    ElMessage.error('网络异常，删除失败');
  }
};

// 初始化
onMounted(async () => {
  //查询所有type
  await selectAllType();
  //初始化type为全部
  await changeType(0);
  //获取登录用户的id信息
  getUserId();
});
</script>

<style lang="scss" scoped>
/* 新增：搜索框和头像区域样式 */
.search-avatar-container {
  display: flex;
  align-items: center;
  justify-content: center; /* 改为居中显示搜索框部分，头像仍可通过调整 justify-content 等微调位置，比如想让头像在最右侧可结合 space-between 等，这里先简单做搜索框区域居中 */
  padding: 10px 20px;
  margin-bottom: 15px; 
}

/* 搜索框样式 */
.search-box {
  display: flex;
  align-items: center;
  gap: 10px; 
  /* 可以根据需要调整宽度，比如设置成固定宽度或者百分比宽度 */
  width: 60%;
}

.search-input {
  width: 100%; 
}

/* 自定义搜索按钮样式，覆盖 Element UI 默认的 primary 颜色为橙色 */
.custom-search-btn {
  background-color: orange;
  border-color: orange;
  /* 可以再加下 hover 等状态的样式优化体验 */
}
.custom-search-btn:hover {
  background-color: darkorange;
  border-color: darkorange;
}

/* 头像样式 */
.avatar-container {
  cursor: pointer; 
  /* 如果想让头像在搜索框居中的情况下靠右侧，可添加 margin-left: auto; */
  margin-left: auto;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%; 
  object-fit: cover; 
  border: 2px solid #eee;
}


// 基础样式
.home-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 15px;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px 0;

  .type-item {
    padding: 10px 20px;
    margin: 5px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
    background-color: #f1f1f1;
    color: #333;
    font-size: 16px;

    &.active {
      background-color: #ff6a00;
      color: #fff;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
  }
}

.cell-item {
  max-width: 100%;
  margin-bottom: 15px;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 6px 6px 0 0;
  }

  .item-body {
    padding: 10px;

    .item-desc {
      font-size: 16px;
      color: #333;
      margin-bottom: 8px;
    }

    .item-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .footer-left {
        display: flex;
        align-items: center;

        .item-img {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          margin-right: 8px;
        }

        .name {
          font-size: 14px;
          color: #666;
        }
      }

      .footer-right {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #999;

        i {
          margin-right: 4px;
          cursor: pointer;
        }
      }
    }
  }
}

// 详情框样式（带关闭按钮×）
.custom-dialog-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;

  // 关闭按钮×（右上角）
  .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    background: #fff;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;

    &:hover {
      background: #f5f5f5;
      color: #333;
    }
  }
}

.custom-dialog-content {
  width: 90%;
  max-width: 1000px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  display: flex;
  max-height: 90vh;

  @media (max-width: 768px) {
    flex-direction: column;
    max-height: 95vh;
  }
}

.img-video-container {
  width: 40%;
  background: #f7f7f7;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  video, .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 90vh;
  }

  @media (max-width: 768px) {
    width: 100%;
    height: 300px;
  }
}

.blog-container {
  width: 60%;
  padding: 24px;
  overflow-y: auto;

  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 12px;
    }

    .user-name {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
  }

  .blog-title {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 0 0 16px;
  }

  .blog-description {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
    word-break: break-word;
  }

  .blog-time {
    font-size: 13px;
    color: #999;
    margin-bottom: 20px;
    display: inline-block;
  }

  @media (max-width: 768px) {
    width: 100%;
    padding: 16px;
  }
}

// 评论区样式
.comment-warp {
  margin-top: 20px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
  margin-bottom: 120px; // 预留一级评论框高度
}

// 优化滚动条样式
.comment-warp::-webkit-scrollbar {
  width: 6px;
}
.comment-warp::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
.comment-warp::-webkit-scrollbar-track {
  background-color: #f9f9f9;
}

.comment-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  // 子评论样式（缩进+左侧线）
  &.child-comment {
    margin-left: 24px;
    padding-left: 16px;
    border-left: 1px dashed #e5e5e5;
  }
}

.comment-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-right: 12px;

  .el-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
}

.comment-main {
  flex: 1;
  min-width: 0;
}

.comment-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;

  .comment-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
  }

  .reply-at {
    font-size: 14px;
    color: #999;
  }

  .comment-text {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    word-break: break-word;
  }
}

.comment-ops {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: #999;

  .comment-time {
    color: #999;
  }

  .el-button {
    padding: 0;
    color: #666;
    font-size: 12px;

    &:hover {
      color: #ff6a00;
    }
  }
}

// 回复输入框
.reply-input {
  margin-top: 12px;
  padding: 12px;
  background: #f9f9f9;
  border-radius: 8px;

  .el-input {
    width: 100%;
    margin-bottom: 10px;

    &::v-deep .el-input__inner {
      border-radius: 6px;
      border-color: #e5e5e5;
    }
  }

  .reply-btns {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
}

// 子评论容器
.children-comments {
  margin-top: 12px;
}

// 一级评论框容器
.top-comment-container {
  display: flex;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-top: 16px;
  align-items: flex-start;
}

// 评论框头像
.top-comment-container .comment-avatar {
  margin-right: 12px;
  flex-shrink: 0;
}

// 输入框区域
.top-comment-input {
  flex: 1;
  width: 0;

  .custom-textarea {
    &::v-deep .el-textarea__inner {
      border-radius: 12px;
      border-color: #e0e0e0;
      padding: 12px 16px;
      resize: none;
      font-size: 14px;
      line-height: 1.6;
      transition: border-color 0.2s;

      &:focus {
        border-color: #ff6a00;
        box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.1);
      }
    }
  }
}

// 发布按钮
.top-comment-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;

  .el-button {
    padding: 8px 24px;
    border-radius: 20px;
    background-color: #ff6a00;
    border-color: #ff6a00;

    &:hover {
      background-color: #e05a00;
      border-color: #e05a00;
    }

    &:disabled {
      background-color: #f5f5f5;
      border-color: #e0e0e0;
      color: #999;
      cursor: not-allowed;
    }
  }
}
</style>